<template>
  <div class="content">
    <template v-for="route in routes" :key="route.key">
      <router-link
        :to="{ name: route.router }"
        replace
        v-slot="{ href, navigate, isActive, isExactActive }"
        custom
      >
        <div
          :class="[
            'navbar-btn',
            (isActive && ['skinsettings', 'edit', 'preview'].includes(route.key)) || isExactActive
              ? 'router-link-exact-active'
              : ''
          ]"
        >
          <a :href="href" @click="navigate"
            ><span>{{ route.text }}</span></a
          >
        </div>
      </router-link>
    </template>
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useStore } from 'vuex'
import { get as _get } from 'lodash-es'
import { FormType } from '@/management/utils/types/formsTypes';
import * as cnt from '@/management/utils/constant'
import { hasIntersection } from '@/management/utils/index'
const store = useStore()
const isManagers = computed(() => {
  return hasIntersection(((window as any).$app?.user?.roleIdList || []), cnt.ROLE_MANAGERS)
})
const routes = computed(() => {
  let formType = _get(store.state, 'publishform.schema.metaData.formType')
  let creatorId = _get(store.state, 'publishform.schema.metaData.creatorId')
  let adminUser = _get(store.state, 'publishform.schema.baseConf.adminUser') || []

  let userIds = adminUser?.map((item: any) => item.value) || []
  if ((userIds.length > 0 && userIds.includes((window as any).$app?.user?.userId)) || creatorId === (window as any).$app?.user?.userId || isManagers) {
      return [{
        icon: 'icon-wenjuanbianji',
        text: '填写',
        router: 'FormsPublishPage',
        formType: [FormType.System, FormType.Forms],
        key: 'preview',
        next: true
      }, {
        icon: 'icon-wenjuanshezhi',
        text: '设置',
        router: 'FormsPublishSetting',
        formType: [FormType.Forms],
        key: 'settings',
        next: true
      }, {
        icon: 'icon-shujutongji',
        text: '统计',
        router: 'FormsPublishAnalysis', // FormsAnalysisPage
        formType: [FormType.Forms],
        key: 'analysispage',
        next: true
      }].filter((item) => item.formType.includes(formType))
  } 
  // else if (userIds.length > 0 && !userIds.includes((window as any).$app?.user?.userId) && creatorId !== (window as any).$app?.user?.userId) {
  //   return [
  //     {
  //       icon: 'icon-wenjuanbianji',
  //       text: '填写',
  //       router: 'FormsPublishPage',
  //       formType: [FormType.System, FormType.Forms],
  //       key: 'preview',
  //       next: true
  //     },
  //     {
  //       icon: 'icon-wenjuanshezhi',
  //       text: '设置',
  //       router: 'FormsPublishSetting',
  //       formType: [FormType.Forms],
  //       key: 'settings',
  //       next: true
  //     }
  //   ].filter((item) => item.formType.includes(formType))
  // } 

  return [{
    icon: 'icon-wenjuanbianji',
    text: '填写',
    router: 'FormsPublishPage',
    formType: [FormType.System, FormType.Forms],
    key: 'preview',
    next: true
  }].filter((item) => item.formType.includes(formType))
})
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  align-items: center;
  justify-content: center;

  .navbar-btn {
    position: relative;
    color: #92949d;
    padding: 0 20px;
    cursor: pointer;
    a {
      color: inherit;
    }
    &.router-link-exact-active {
      color: $font-color-title;

      &::before {
        content: '';
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: $primary-color;
        bottom: -16px;
        left: 20px;
      }
    }

    // &.router-link-exact-active {
    //   color: #4a4c5b;
    // }
    .iconfont {
      margin-right: 12px;
    }
  }
}
</style>
